const path = require('path')
// 启用热更新的第二步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的插件，只要是插件一定要放到 plugin 节点中去
// 这个插件的两个作用是：
// 1. 自动在内存中根据指定页面生成一个内存页面
// 2. 自动把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
// 配置完了就可以直接用 webpack 命令打包了~~~~
module.exports = {
	// 指定入口和出口路径和文件
	// 1. 入口，指定要打包哪个文件
	entry: path.join(__dirname,'./src/main.js'),
	// 2. 出口，指定打包文件放在哪，和打包文件的名字
	output: {
		path:path.join(__dirname,'./dist'),
		filename:'bundle.js'
	},
	// 这是配置 dev-server 命令参数的第二种形式，相对来说这种方式麻烦一些
	// "dev": "webpack-dev-server --open --port 5000 --contentBase src --hot"
	devServer:{
		// 自动打开浏览器
		open:true,
		// 设置启动时的运行端口
		port:5000,
		// 指定托管的根目录
		// contentBase:'src',
		// 启用热更新的第一步...
		hot:true
	},
	// 配置插件的节点，在 webpack 里只要带 s 的都是数组...
	plugins:[
		// new 一个热更新的模块对象，这是启用热更新的第三步最后一步...
		new webpack.HotModuleReplacementPlugin(),
		// 创建一个在内存中生成 HTML 页面的插件
		new htmlWebpackPlugin({
			// 根据模板中的页面生成内存中的页面
			// 1. 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			template:path.join(__dirname,'./src/index.html'),
			// 2. 指定生成的页面的名称，如果和原来文件名不一样就无法写入内存...
			filename:'index.html'
		})
	],
	// 这个节点用来配置所有的第三方模块加载器
	module:{
		// 所有第三方模块的匹配规则
		rules:[
			// 配置处理 .css 文件的第三方 loader 规则
			{ test:/\.css$/,use:['style-loader','css-loader'] },
			// 配置处理 .less 文件的第三方 loader 规则
			{ test:/\.less$/,use:['style-loader','css-loader','less-loader'] },
			// 配置处理 .scss 文件的第三方 loader 规则
			{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] },
			// 配置处理 .jpg 等文件路径的第三方 loader 规则
			// limit 给定的值是图片的大小，单位是 byte 如果图片大于或等于值，就不会转换 base64 字符串
			// 为了防止图片重名，还会自动给图片一个 哈希值 名字
			// 设置 name 属性后就会显示原来名字和后缀名，不加后缀名就会变成下载链接了，图片重名会覆盖...
			// 防止重名覆盖，可以在名字前加 哈希值，最大设置到 32 位，可以只要前 8 位。
			{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=34381&name=[hash:8]-[name].[ext]' },
			// 配置 bootstrap/dist/fonts/ 里的五种字体库后缀名
			{ test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader' },
			// 配置识别转换 ES6 更高级的语法，注意要排除一个目录 node_modules
			{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ },
			// 配置处理 vue 的 loader 规则
			{ test:/\.vue$/,use:'vue-loader' }
		]
	},
	resolve:{
		// 修改 Vue 包被导入时的路径
		// alias:{
		// 	"vue$":"vue/dist/vue.js"
		// }
	}
}